import React, { useEffect, useState, useCallback } from 'react'
import axios from '../.././service/index'
import { FloatButton } from 'antd';
import { useParams, useLocation } from 'react-router-dom'
import { ShoppingCart } from '@react-vant/icons';
import { ActionBar, Cell, Popup, Button } from 'react-vant'
import { CartO,WapHomeO,Bars,Contact } from '@react-vant/icons'
import './index.scss'

export default function Clothes() {
    const params = useParams()
    const location = useLocation()
    const [list, setList] = useState([])
    const [num, setnum] = useState(0)
    const { keyword } = location.state || {}
    const [showCloseIcon, setShowCloseIcon] = useState(false)
    const [color] = useState(['黑色', '白色', '蓝色'])
    const [size] = useState(['S', 'M', 'L', 'XL'])
    const [carnum, setCarnum] = useState(0)
    const [car_list, setcarlist] = useState([])
    const [selectedColor, setSelectedColor] = useState();
    const [selectedSize, setSelectedSize] = useState();
    const [selectedQuantity, setSelectedQuantity] = useState(0);

    const getlist = useCallback(
        async (keyword) => {
            if (keyword) {
                let { data } = await axios.get(`/clothes_list?name=${keyword}`, {
                    params: {
                        tid: params.id
                    }

                })
                console.log(keyword);
                console.log(data);
                setList(data.data)


            } else {
                let { data } = await axios.get('/clothes_list', {
                    params: {
                        tid: params.id
                    }

                })
                console.log(params.id);
                setList(data.data)


            }

        }
        , [params.id])


    //排序
    const sort_price = () => {
        if (num === 0) {
            let slist = [...list]
            slist.sort((a, b) => a.price - b.price)
            setList(slist)
            setnum(1)
        } else if (num === 1) {
            let slist = [...list]
            slist.sort((a, b) => b.price - a.price)
            setList(slist)
            setnum(0)
        }
    }
    //购物车加减
    const update_num = (e, status) => {
        if (status === 0) {
            setCarnum(carnum + 1)
        } else {
            setCarnum(carnum - 1)
        }   
    }

    useEffect(() => {
        getlist(keyword)
    }, [getlist, keyword])
    return (
        <div className='cbox'>
            <div className='sort_price'>
                <span onClick={() => { sort_price() }}>价格</span>

            </div>
            <div className='clothes'>

                {
                    list.map((item, index) => {
                        return (<div key={index} className='con'>
                            <div>
                                <img src={item.img} alt="" />
                            </div>
                            <div>
                                {item.name}
                            </div>
                            <span style={{color:'red'}}>
                                ￥{item.price}
                            </span>
                            <span>
                                <Cell onClick={() => setShowCloseIcon(true)} >
                                    <ShoppingCart className='shop' />
                                </Cell>
                            </span>
                        </div>)
                    })
                }

            </div>
            <div>

                <FloatButton.BackTop visibilityHeight="20">

                </FloatButton.BackTop>

            </div>
            <div className='car'>
                <Popup
                    visible={showCloseIcon}
                    closeable
                    style={{ height: '40%' }}
                    position='bottom'
                    onClose={() => setShowCloseIcon(false)}
                >
                    <div className='color'>
                        <h2>颜色</h2>
                        {color.map((item, index) => {
                            return (
                                <span key={index} style={{ marginRight: '20px' }} onClick={() => setSelectedColor(item)}>{item}</span>
                            )
                        })}
                    </div>
                    <div className='color'>
                        <h2>尺寸</h2>
                        {size.map((item, index) => {
                            return (
                                <span key={index} style={{ marginRight: '20px' }} onClick={() => setSelectedSize(item)}>{item}</span>
                            )
                        })}
                    </div>
                    <div className='num'>
                        <h2>购买数量</h2>
                        <button onClick={(e) => { update_num(e, 1); setSelectedQuantity(selectedQuantity - 1); }} >-</button>
                        <span>{carnum}</span>
                        <button onClick={(e) => { update_num(e, 0); setSelectedQuantity(selectedQuantity + 1); }}>+</button>
                    </div>
                    <div className='cons'>
                        <Button type='primary' onClose={() => {
                            setShowCloseIcon(false);
                            setcarlist([...car_list, { color: selectedColor, size: selectedSize, quantity: selectedQuantity }]);
                        }}
                            onClick={() => setcarlist([...car_list, { color: selectedColor, size: selectedSize, quantity: selectedQuantity }])}>确定</Button>
                    </div>

                </Popup>
            </div>
            <div className='demo-action-bar'>
                <ActionBar >
                    <ActionBar.Icon icon={<WapHomeO/>} text='首页' style={{marginLeft:'10x'}} />
                    <ActionBar.Icon icon={<Bars />} text='分类' style={{marginLeft:'40px'}} />
                    <ActionBar.Icon icon={<CartO />} badge={{ content: car_list.length }} text='购物车'  style={{marginLeft:'40px'}}/>
                    <ActionBar.Icon icon={<Contact  />} text='个人' style={{marginLeft:'50px'}} />
                </ActionBar>
            </div>
        </div>

    )
}
